<!-- 项目生产板块金额数量 -->
<template>
  <div id="xm-block-mutiy-bar" style="width: 100%; height: 100%;"></div>
</template>


<script setup>
import * as echarts from 'echarts';
import { reactive, onMounted, watch } from 'vue';

const props = defineProps({
  xAxis: {
    type: Array,
    default() {
      return [];
    }
  },
  amounts: {
    type: Array,
    default() {
      return [];
    }
  },
  ysf: {
    type: Array,
    default() {
      return [];
    }
  },
  ra: {
    type: Array,
    default() {
      return [];
    }
  },
  ca: {
    type: Array,
    default() {
      return [];
    }
  }
});

const colors = ['#5470C6', '#EE6666'];
const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  legend: {
    data: ['拟收费', '已收费', '入案', '出案']
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        show: true,
        interval: 0,
        width: 60,
        overflow: "breakAll"
      },
      // prettier-ignore
      data: []
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '金额（万元）',
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '数量（个）',
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  series: [
    {
      name: '拟收费',
      type: 'bar',
      data: [],
    },
    {
      name: '已收费',
      type: 'bar',
      data: [],
    },
    {
      name: '入案',
      type: 'line',
      yAxisIndex: 1,
      data: [],
    },
    {
      name: '出案',
      type: 'line',
      color: '#2ea043',
      yAxisIndex: 1,
      data: []
    }
  ]
})
let mutiy = null;

watch(() => props, () => {
  option.xAxis[0].data = props.xAxis;
  option.series[0].data = props.amounts;
  option.series[1].data = props.ysf;
  option.series[2].data = props.ra;
  option.series[3].data = props.ca;
  mutiy.setOption(option, true);
}, { deep: true })

onMounted(() => {
  mutiy = echarts.init(document.getElementById("xm-block-mutiy-bar"));
  option && mutiy.setOption(option);
});
</script>

<style scoped></style>
